<template>
  <view class="component menu-view">
    <view class="menu-panel">
      <view class="thumb-box" v-for="(item1, index1) in data" :key="index1" @click="clickMenu(item1)">
        <text class="text">{{ item1.name }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>

const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [];
    }
  }
});

const emit = defineEmits('selected');

const dataItem = ref(props.data);
console.log('menu-view', dataItem);

const menuOperate = inject('menuOperate');
function clickMenu(menu) {
  console.log('clickMenu', menu);
  menuOperate('clickItem', menu);
}


</script>

<style lang="scss" scoped>
.menu {
  &-view {
    height: 100%;
    flex-shrink: 0;
  }

  &-panel {
    padding: 24rpx 32rpx;
    display: flex;
    gap: 10rpx;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}



.thumb-box {
  display: flex;
  width: calc(50% - 10rpx);
  padding: 16rpx 40rpx;
  justify-content: center;
  align-items: center;
  border-radius: 4rpx;
  background: #F4F8FB;
  text-align: center;

  .text {
    font-size: 28rpx;
    color: #1A1A1A;
    line-height: 40rpx;
  }
}
</style>